<!--
*  功能描述：人员管理页面
 -->
<template>
  <div>
    <!-- 人员搜索 -->
    <div class="div1">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
          <template slot="title">
            <i class="header-icon el-icon-search"></i
            ><span class="collapsetitle">查询人员信息</span>
          </template>
          <div class="collapsediv1">
            <span style="font-size: 15px">生产部门:</span>
            <el-select v-model="depId" placeholder="请选择" class="input1">
              <el-option
                v-for="item in superoptions"
                :key="item.DepId"
                :label="item.DepName"
                :value="item.DepId"
              >
              </el-option>
            </el-select>
            <span style="font-size: 15px">用户:</span
            ><el-input v-model="PersonnelName" class="input1"></el-input>
            <el-button type="primary" @click="GetDep()">查询</el-button>
            <el-button type="primary" @click="openAdd()">员工上线</el-button>
            <el-button type="primary">删除</el-button>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 人员显示 -->
    <div class="div2">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="2">
          <template slot="title">
            <i class="header-icon el-icon-s-order"></i
            ><span class="collapsetitle">信息列表</span>
          </template>
          <div class="collapsediv1">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              class="table1"
              @selection-change="handleSelectionChange"
              stripe
              
            >
            
              <el-table-column prop="PersonneISort" label="序号">
              </el-table-column>
              <el-table-column prop="PersonnelUserName" label="登录名">
              </el-table-column>
              <el-table-column prop="PersonnelName" label="姓名">
              </el-table-column>
              <el-table-column prop="PersonneBir" label="出生日期" width="100px">
              </el-table-column>
              <el-table-column prop="PersonneISix" label="性别">
              </el-table-column>
              <el-table-column prop="depDescribe" label="部门名称">
              </el-table-column>
              <el-table-column prop="bdicName" label="专业"> </el-table-column>
              <el-table-column prop="cdicName" label="角色" width="100px"> </el-table-column>
              <el-table-column prop="PersonneIContact" label="联系电话" width="100px">
              </el-table-column>
              <el-table-column prop="PersonneIPhone" label="手机" width="115px">
              </el-table-column>
              <!-- <el-table-column prop="" label="职位"> </el-table-column> -->
              <!-- <el-table-column prop="HeadPortrait" label="头像">
              </el-table-column> -->
              <el-table-column prop="ddicName" label="管理职位" width="120px">
              </el-table-column>
              <el-table-column prop="edicName" label="技术职位" width="100px">
              </el-table-column>
              <el-table-column prop="JobStatus" label="状态"> </el-table-column>
              <el-table-column prop="EntryTim" label="入职时间" width="100px">
              </el-table-column>
              <el-table-column prop="depDescribe" label="任职部门">
              </el-table-column>
              
              <el-table-column label="操作"  fixed="right" width="150px"> 
                 <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="DelPer(scope.$index, scope.row)"
                    >删除</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="DelPer(scope.$index, scope.row)"
                    >编辑</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageindex"
                :page-sizes="[1, 5, 10, 20]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagetotal"
              >
              </el-pagination>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 人员添加 -->
    <transition name="el-fade-in">
      <el-card class="box-card" v-show="showadd">
        <div slot="header" class="clearfix">
          <span>新增用户</span>
        </div>
        <div>
          <el-form ref="form" :model="form" label-width="80px" size="mini">
            <el-row>
              <el-col :span="12">
                <el-form-item label="姓名">
                  <el-col :span="12">
                    <el-input v-model="form.PersonnelName"></el-input>
                  </el-col>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="登录名">
                  <el-col :span="12">
                    <el-input v-model="form.PersonnelUserName"></el-input>
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="密码">
                  <el-col :span="12">
                    <el-input v-model="form.PersonneIPassword"></el-input>
                  </el-col>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="出生日期">
                  <el-col :span="12">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="form.PersonneIBir"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="性别">
                  <el-select v-model="form.PersonneISix" placeholder="性别">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="专业">
                  <el-select
                    v-model="form.PersonneIMajor"
                    placeholder="--选择专业--"
                  >
                    <el-option
                      v-for="item in PersonneIMajor"
                      :key="item.DicId"
                      :label="item.DicName"
                      :value="item.DicId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="部门名称">
                  <el-select
                    v-model="form.DepartmentId"
                    placeholder="--选择部门--"
                  >
                    <el-option
                      v-for="item in superoptions"
                      :key="item.DepId"
                      :label="item.DepName"
                      :value="item.DepId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="角色">
                  <el-select
                    v-model="form.PersonneIRoleId"
                    placeholder="--角色--"
                  >
                    <el-option
                      v-for="item in PersonneIRoleId"
                      :key="item.DicId"
                      :label="item.DicName"
                      :value="item.DicId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="邮箱">
                  <el-col :span="12">
                    <el-input v-model="form.PersonneIMailbox"></el-input>
                  </el-col>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="手机">
                  <el-col :span="12">
                    <el-input v-model="form.PersonneIPhone"></el-input>
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="联系电话">
                  <el-col :span="12">
                    <el-input v-model="form.PersonneIContact"></el-input>
                  </el-col>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="设计职称">
                  <el-select
                    v-model="form.DesignTitle"
                    placeholder="--设计职称--"
                  >
                    <el-option
                      v-for="item in option"
                      :key="item.view"
                      :label="item.view"
                      :value="item.view"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="管理职位">
                  <el-select
                    v-model="form.Mposition"
                    placeholder="--管理职位--"
                  >
                    <el-option
                      v-for="item in Mposition"
                      :key="item.DicId"
                      :label="item.DicName"
                      :value="item.DicId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="技术职位">
                  <el-select
                    v-model="form.TechnicalPosition"
                    placeholder="--技术职位--"
                  >
                    <el-option
                      v-for="item in TechnicalPosition"
                      :key="item.DicId"
                      :label="item.DicName"
                      :value="item.DicId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="隶属部门">
                  <el-checkbox-group v-model="Subjectiona">
                    <el-checkbox
                      v-for="item in superoptions"
                      :key="item.DepId"
                      :label="item.DepName"
                      :value="item.DepId"
                    ></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="在职状态">
                  <el-select v-model="form.JobStatus" placeholder="在职状态">
                    <el-option label="在职" value="在职"></el-option>
                    <el-option label="离职" value="离职"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="入职时间">
                  <el-col :span="12">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="form.EntryTime"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="上传头像">
                  <el-upload
                    class="avatar-uploader"
                    action="Personnel/UpLoad"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="离职时间">
                  <el-col :span="12">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="form.DepartureTime"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="排序">
                  <el-col :span="12">
                    <el-input v-model="form.PersonneISort"></el-input>
                  </el-col>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item>
                  <el-button type="primary" @click="Addper">立即创建</el-button>
                  <el-button @click="closeAdd">取消</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      handleSelectionChange: "",
      activeNames: ["1", "2"],
      superoptions: [], //部门选择器
      depId: "", //部门查询
      PersonnelName: "", //人员查询
      tableData: [],
      pageindex: 1,
      pagesize: 5,
      pagetotal: 0,
      showadd: false,
      form: {
        
      },
      Subjectiona: [],
      option: [],
      PersonneIMajor: [], //专业选择器
      PersonneIRoleId: [], //角色选择器
      Mposition: [], //管理职位选择器
      TechnicalPosition: [], //技术职位
      imageUrl: "", //头像
    };
  },

  created() {
    this.superDep();
    this.GetPer();
    this.superjor(); //专业
    this.superRole(); //角色
    this.superMposi(); //管理职位
    this.superPosition(); //技术职位
  },
  computed: {},
  methods: {
    GetPer() {
      this.$http
        .get("Personnel/GetPer?", {
          params: {
            depId: this.depId,
            PersonnelName: this.PersonnelName,
            pageindex: this.pageindex,
            pagesize: this.pagesize,
          },
        })
        .then((res) => {
          this.tableData = res.data.PageData;
          this.pagetotal = res.data.PageTotal;
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.GetPer();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageindex = val;
      this.GetPer();
      console.log(`当前页: ${val}`);
    },
    //获取部门
    superDep() {
      this.$http.get("Institutionalsetting/selecDep").then((res) => {
        this.superoptions = res.data.Data;
      });
    },
    //打开添加
    openAdd() {
      this.form = {};
      this.showadd = true;
    },
    //关闭添加
    closeAdd() {
      this.form = {};
      this.showadd = false;
    },
    //添加方法
    Addper() {
      // this.form.Subjectiona.toString();
      this.$http
        .post("Personnel/AddPer", this.form)
        .then((res) => {
          if (res.data.Code == 200) {
            this.GetPer();
            this.$notify({
              title: "成功",
              message: "添加成功",
              type: "success",
            });
          } else {
            this.GetPer();
            this.$notify.error({
              title: "错误",
              message: res.data.Message,
            });
          }
        });
    },
    //获取专业
    superjor() {
      this.$http
        .get("Institutionalsetting/selecDic?DicCode=M_t")
        .then((res) => {
          this.PersonneIMajor = res.data.Data;
        });
    },
    //获取角色
    superRole() {
      this.$http
        .get("Institutionalsetting/selecDic?DicCode=M_r")
        .then((res) => {
          this.PersonneIRoleId = res.data.Data;
        });
    },
    //获取管理职位
    superMposi() {
      this.$http
        .get("Institutionalsetting/selecDic?DicCode=M_m")
        .then((res) => {
          this.Mposition = res.data.Data;
        });
    },

    //删除人员
    DelPer(index, row) {
      this.$confirm("此操作将永久删除该人员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.post("Personnel/DelPer?PersonnelId=" + row.PersonnelId).then((res) => {
            if (res.data.Code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.GetPer();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //获取技术职位
    superPosition() {
      this.$http
        .get("Institutionalsetting/selecDic?DicCode=M_d")
        .then((res) => {
          this.TechnicalPosition = res.data.Data;
        });
    },
    //上传头像
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.HeadPortrait=res.url;
    },
  },
};
</script>
 <style  scoped>
.collapsetitle,
.header-icon {
  color: white;
  font-size: 20px;
  margin-left: 10px;
}
.collapsediv1 {
  margin-top: 20px;
  margin-left: 20px;
}
.input1 {
  width: 200px;
  margin-left: 10px;
  margin-right: 10px;
}
.div2 {
  margin-top: 20px;
}
.table1 {
  width: 99%;
  border: 1px solid #eceef5;
  border-radius: 6px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  margin-top: 30px;
  border: 1px solid #eceef5;
}
</style>
<style>
.el-collapse-item__header {
  background-color: #7ACCC6;
  height: 30px;
  border-radius: 4px 4px 0px 0px;
}
.el-collapse {
  border-radius: 6px;
}
.el-collapse-item__wrap {
  border-radius: 0px 0px 6px 6px;
  border: 1px solid #7ACCC6;
  border-top: 0px solid #7ACCC6;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #7ACCC6;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
 